<template>
	<view style="padding: 10px;">
		<u-form :model="formData" ref="uForm">
			<view class="item-title">基本信息</view>
			<u-form-item label="房主姓名"  :border-bottom="false" label-width="170" prop="fzxm" >
				<u-input v-model="formData.fzxm"  border="true" :disabled="disabled" />
			</u-form-item>
			<u-form-item label="房屋情况"  :border-bottom="false"  label-width="170" >
				<u-radio-group v-model="formData.fwqk" :disabled="disabled">
					<u-radio v-for="(item, index) in fwqkList" :key="index" :name="item.label">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item label="详细地址"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.xxdz" border="true" type="textarea"  :disabled="keyBoardShow1||keyBoardShow2||disabled" />
			</u-form-item>
			
			<u-form-item label="房屋面积"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.fwmj" border="true" :disabled="disabled" />
			</u-form-item>
			<u-form-item label="身份证号"  :border-bottom="false"  label-width="170" prop="sfzh" >
				<u-input v-model="formData.sfzh" @click="keyBoardShow1=!keyBoardShow1" disabled="true" border="true" />
			</u-form-item>
			<u-form-item label="工作单位"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.gzdw"  border="true" :disabled="disabled" />
			</u-form-item>
			<u-form-item label="联系方式"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.lxfs"  border="true" :disabled="disabled" />
			</u-form-item>
			
			<view class="item-title">承租人信息</view>
			<u-form-item label="姓名"  :border-bottom="false" label-width="170"  >
				<u-input v-model="formData.czrxm"  border="true" :disabled="disabled" />
			</u-form-item>
			<u-form-item label="身份证号"  :border-bottom="false" label-width="170"  >
				<u-input v-model="formData.czrsfzh"  @click="keyBoardShow2=!keyBoardShow2" disabled="true"  border="true"  />
			</u-form-item>
			<u-form-item label="工作单位及职务"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.czrgzdwjzw"  border="true" :disabled="disabled" />
			</u-form-item>
			<u-form-item label="联系方式"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.czrlxfs" maxlength="11" border="true" :disabled="disabled" />
			</u-form-item>
			
			<view class="item-title">同住人员信息
				<u-icon v-if="!disabled" name="minus-circle" style="float: right;margin-right: 2px;" color="#fa3534" size="40" label="删除" @click="del"></u-icon>
				<u-icon v-if="!disabled" name="plus-circle" style="float: right;margin-right: 2px;" color="#2979ff" size="40" label="新增" @click="add"></u-icon>
			</view>
			<z-table :tableData='formData.list' :columns='columns' stickSide :showLoading="false"  :tableHeight='300' :showSelect="!disabled" @onSelect='tableSelect' ></z-table>	
			
			<u-form-item label="曾被侵害经历"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.bz" border="true" type="textarea"  :disabled="keyBoardShow1||keyBoardShow2||disabled" />
			</u-form-item>
			
			<u-button v-if="!disabled" @click="save(1,false)" :disabled="submitBtn"   type="primary" >保存</u-button>
			
			<view class="buttons" v-if="hasChecked">
				<u-button  @click="checked()" :disabled="submitBtn" type="primary">审核通过</u-button>
				<u-button  @click="unChecked()" :disabled="submitBtn" type="success">审核不通过</u-button>
			</view>
			<u-modal show-cancel-button="true"  @confirm="confirm" v-model="unCheckedModalShow" :title="content" >
				<view style="padding: 10px;">
					<u-input v-model="formData.unCheckedReason" border="true" type="textarea" :auto-height="true" />
				</view>
				
			</u-modal>
		</u-form>
		<u-keyboard v-if="!disabled" ref="uKeyboard" mode="card" tips="身份证" :safe-area-inset-bottom="true" @change="valChange1" @backspace="backspace1" v-model="keyBoardShow1"></u-keyboard>
		<u-keyboard v-if="!disabled" ref="uKeyboard" mode="card" tips="身份证" :safe-area-inset-bottom="true" @change="valChange2" @backspace="backspace2" v-model="keyBoardShow2"></u-keyboard>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import zTable from "@/components/z-table/z-table.vue";
	import { mapState} from 'vuex';
	export default {
		components:{zTable},
		computed:mapState(['user', ]),
		data() {
			return {
				disabled:false,
				hasChecked:false,
				keyBoardShow1:false,
				keyBoardShow2:false,
				unCheckedModalShow:false,
				content:'请输入原因',
				fwqkList:[
					{label:"精装"},
					{label:"简装"},
					{label:"毛坯"},
				],
				submitBtn:false,
				columns:[{
					title:'姓名',
					key: "xm",
					width: 200
				},{
					title: '关系',
					key: "gx",
					width: 150
				},{
					title: '身份证号',
					key: "sfzh",
					width: 300,
					formatNum: false
				},{
					title: '工作单位',
					key: "gzdw",
					width: 300,
					formatNum: false
				},{
					title: '联系电话',
					key: "lxdh",
					width: 200,
					formatNum: false
				},{
					title: '户籍地',
					key: "hjd",
					width: 300,
					formatNum: false
				}],
				formData:{
					id:'',
					fzxm:'',
					fwqk:'精装',
					xxdz:'',
					fwmj:'',
					sfzh:'',
					gzdw:'',
					lxfs:'',
					czrxm:'',
					czrsfzh:'',
					czrgzdwjzw:'',
					czrlxfs:'',
					bz:'',
					list:[],
					tjr:'',
					state:'1',
					unCheckedReason:'',
					delIds:[]
				},
				tableList:[],
				selectList:[],
				rules: {
					fzxm: [
						{ 
							required: true, 
							message: '请输入姓名',  
							trigger: ['change','blur'],
						}
					],
					sfzh: [
						{
							required: true, 
							message: '请输入身份证号', 
							trigger: ['change','blur'],
						},
						{
							min: 18, 
							message: '身份证号不能少于18个字符', 
							trigger: ['change','blur']
						}
					]
				}
			}
		},
		methods:{
			doSave(){
				this.submitBtn = true;
				let that = this;
				that.$http.post("/xxcj/zfrh/save",that.formData).then(res=>{
					let data = res.data.data;
					if(data){
						that.$refs.uToast.show({
							title: '保存成功',
							type: 'success',
							callback: ()=>{
								let pages = getCurrentPages(); // 当前页面
								let prePage = pages[pages.length - 2]; // 前一个页面
								uni.navigateBack({
								     success: function() {
										prePage.onLoad(); // 执行前一个页面的onLoad方法
								     }
								});
							}
						})
					}else{
						that.submitBtn = false;
						that.$refs.uToast.show({
							title: '保存失败,过一会再试试吧',
							type: 'error'
						})
					}
				}).catch(e=>{
					that.submitBtn = false;
					that.$refs.uToast.show({
						title: '保存失败,过一会再试试吧',
						type: 'error'
					})
				})
			},
			save(state,isCheck){
				const that = this;
				if(state)
					this.formData.state = state;
				if(isCheck){
					this.doSave();
				}else{
					this.formData.tjr = this.user.user.id;
					this.$refs.uForm.validate(valid => {
						if (valid) {
							that.doSave();
						} else {
							this.submitBtn = false;
							console.log('表单信息不完整');
						}
					});
				}
				
			},
			del() {
				//页面删除，只有在最后保存时会永久删除
				let that = this;
				that.formData.delIds = [];
				if(this.selectList.length){
					uni.showModal({
						content:'选中内容保存后将被永久删除,是否继续？',
						success: (res)=>{
							if(res.confirm){
								for(let i of that.selectList){
									let delItem = that.formData.list[i];
									if(delItem&&delItem.id){
										that.formData.delIds.push(delItem.id);
									}
									that.formData.list.splice(i,1);
								}
								//将存在id的数据通过后台数据库删除
								/* if(delId.length>0){
									this.submitBtn = true;
									this.$http.delete('/xxcj/zfrh/delTzry',{ids:delId}).then(res=>{
										this.submitBtn = false;
										this.selectList = [];
										
									}).catch(e=>{
										this.submitBtn = false;
									})
								} */
							}
						}
					})
					
				}else{
					console.log("没有选择要删除的");
				}
					
			},
			add() {
				this.$u.route('pages/views/xxcj/zfrh/zfrh_tzry_add');
			},
			valChange1(val){
				if(this.formData.sfzh.length<18){
					this.formData.sfzh += val;
				}
			},
			backspace1(){
				if(this.formData.sfzh.length) this.formData.sfzh = this.formData.sfzh.substr(0, this.formData.sfzh.length - 1);
			},
			valChange2(val){
				if(this.formData.czrsfzh.length<18){
					this.formData.czrsfzh += val;
				}
			},
			backspace2(){
				if(this.formData.czrsfzh.length) this.formData.czrsfzh = this.formData.czrsfzh.substr(0, this.formData.czrsfzh.length - 1);
			},
			tableSelect(val){
				this.selectList = val;
			},
			checkHasPermission(){
				if(this.formData.id){
					//没有修改权限，或者已审核通过，或者当点内容非本用户，设置内容为禁用状态
					if(this.user.user.auths.indexOf('edit')<0||this.formData.state==='2'|| this.formData.tjr != this.user.user.id){
						this.disabled = true;
					}
					//有审核权限，并且未审核状态，并且非本用户内容
					if(this.user.user.auths.indexOf('check')>-1&&this.formData.state==='1'&&this.formData.tjr != this.user.user.id){
						this.hasChecked = true;
					}
				}
			},
			//审核通过
			checked(){
				this.save(2,true);
			},
			//审核不通过
			unChecked(){
				this.unCheckedModalShow = true;
			},
			confirm(){
				this.save(3,true);
			},
		},
		onLoad(options) {
			Object.assign(this.formData,options.item?JSON.parse(options.item):{});
			this.checkHasPermission();
			this.$refs.uForm.setRules(this.rules);
			uni.$on('addTzry',(data) => {
				this.formData.list.push(data)
			})
		},
		
	}
</script>

<style scoped>
	.item-title{
		position: relative;
		font-size: 12px;
		padding-left: 8px;
		line-height: 1;
		margin: 8px auto;
	}
	.item-title::after{
		position: absolute;
		width: 4px;
		top: -1px;
		height: 16px;
		content: "";
		left: 0;
		border-radius: 10px;
		background-color: #2979ff;
	}
	
	.buttons{
		display: flex;
		width: 100%;
		margin-top: 20upx;
		justify-content: center;
	}
	.buttons u-button{
		margin: 0 50rpx;
	}
	
	.fadeIn{
		animation: fadeIn .3s;
		display: block;
	}
	.fadeOut{
		animation: fadeOut .3s;
		display: none;
	}
	@keyframes fadeOut{
	 0% {
			opacity: 1;
		}
	 50% {
		opacity: 0.5;
		 }
	 100%{
		opacity: 0; 
		}
	}
	@keyframes fadeIn{
	 0% {opacity: 0; }
	 50% {opacity: 0.5;}
	 100%{opacity: 1; }
	}
</style>
